<script type="text/javascript">
{literal}
    $(document).ready(function () {    	
        $('#refreshParaClinic').bind('click', function() {
            var ticketId = $('#ticket_id').val();
        	viewOpenTicket(ticketId);            
        });   
    });
    
    var cur_id = "add_service_item";
    var cur_td_id = "tdAddService";
    
    function toggleTab(id, tdId) {
        $("#" + cur_id).css("display", "none");
        $("#" + cur_td_id).css("border-bottom", "1px solid #BBB").css("background", "#FFF");
        $("#" + cur_td_id + " a").css('color', '#AAA');
        cur_id = id;
        cur_td_id = tdId;
        $("#" + id).css("display", "block");
        $("#" + tdId).css("border-bottom", "none").css("background", "#EEE");
        $("#" + tdId + " a").css('color', 'green');
    }
{/literal}
</script>
<table cellspacing='0' cellpadding='0' style="background: #EEE; width: 100%">
	<tr>
		<td id='tdAddService' style='width: 33%; border-width: 1px 1px 0px 1px; border-color: #BBB; border-style: solid; background: #EEE; padding: 5px'>
			<a style='text-decoration: none; font-weight: bold; color: green' 
			   href="javascript:toggleTab('add_service_item', 'tdAddService');">{translate}Add service{/translate}</a>
		</td>
		<td id='tdAddCompositeService' style='width: 33%; border-width: 1px 1px 1px 0px; border-color: #BBB; border-style: solid; background: #FFF; padding: 5px'>	
			<a style='text-decoration: none; font-weight: bold; color: #AAA' 
			   href="javascript:toggleTab('add_composite_service_item', 'tdAddCompositeService');">{translate}Add composite service{/translate}</a>
		</td>
		<td id='tdAddTest' style='width: 34%; border-width: 1px 1px 1px 0px; border-color: #BBB; border-style: solid; background: #FFF; padding: 5px'>
			<a style='text-decoration: none; font-weight: bold; color: #AAA'
			   href="javascript:toggleTab('addParaClinicItem', 'tdAddTest');">{translate}Paraclinic{/translate}</a>
		</td>
	</tr>
	<tr>
		<td colspan='3' style='border-width: 0px 1px 1px 1px; border-color: #BBB; border-style: solid;  padding: 5px'>
			<div id="add_service_item" style="display: block;">
				<table class='grid' cellspacing="0" cellpadding="0" style='width: 100%; border: none;'>
					<tr>
						<th style='background: none; color: #333; width: 20%'>{translate}Department/Room{/translate}</th>
						<th style='background: none; color: #333; width: 40%''>{translate}Service{/translate}</th>						
						<th style='background: none; color: #333; width: 15%''>{translate}Executive place{/translate}</th>						 		
						<th style='background: none; color: #333; width: 15%''>{translate}Price{/translate}</th>			
						<th style='background: none; color: #333; width: 10%''>&nbsp;</th>
					</tr>
					<tr>
						<td style='border-bottom: none;'>			
							<select id="department" name="department" style="width: 150px;">
								{html_options options=$departments}
							</select>												
						</td>
						<td style='border-bottom: none;'>
							<select id="service" style='width: 330px'>
								{$serviceList}
							</select>
						</td>						
						<td style='border-bottom: none;'>
							<select id="service_room" style='width: 120px'>
								
							</select>
						</td>
						<td style='border-bottom: none;'><span id="service_price"></span></td>						
						<td style='border-bottom: none;'>
							<input type="button" id="add_service" value="{translate}Add service_2{/translate}">				
						</td>
						
					</tr>
				</table>
			</div>
		
		<div id="add_composite_service_item" style="display: none;">
			<table class="grid" cellspacing="0" cellpadding="0" style='border: none;'>	
				<tr>
					<th style='background: none; color: #333;'>{translate}Choose composite service{/translate}</th>
					<th style='background: none; color: #333;'>&nbsp;</th>							
				</tr>
				<tr>
					<td style='border-bottom: none;'>
						<select id="composite_service" style="width: 250px">
							{html_options options=$compositeServiceList}
						</select>																		
					</td>				
					<td style='border-bottom: none;'>
						<input type="button" id="add_composite_service" value="{translate}Add{/translate}">				
					</td>			
				</tr>
			</table>
		</div>
		
		<div id="addParaClinicItem" style="display:none;">
			<table class="grid" cellspacing="0" cellpadding="0" style='border: none;'>	
				<tr>
					<th style='background: none; color: #333;'> {translate}Select paraclinic service{/translate} </th>
					<th style='background: none; color: #333;'>&nbsp;</th>							
				</tr>
				<tr>
					<td style='border-bottom: none;'>
						<select id="paraClinicService" name="paraClinicService" style="width: 250px">
							{html_options options=$paraClinicServices}				
						</select>														
					</td>				
					<td style='border-bottom: none;'>
						<input type="button" id="addParaClinic" value="{translate}Add{/translate}">
					</td>			
				</tr>
			</table>	
		</div>
		</td>
	</tr>
</table>

<div id="add_composite_service_dialog" title="{translate}Choose service details{/translate}" style="display:none;">	
					
</div>

<div id="update_composite_service_dialog" title="{translate}Choose service details{/translate}" style="display:none;">		
	<table class="details"><tr><td>{translate}Services list{/translate}</td></tr></table>
	<input type="hidden" id="update_ticket_item_id" value="">				
</div>

<div id="composite_service_detail_dialog" title="{translate}Service details{/translate}" style="display:none;">		
	<table class="details"><tr><td>{translate}Services list{/translate}</td></tr></table>				
</div>
<div id="paraClinicAssignment" style="display: none;"></div>
<a id="refreshParaClinic" style="display: none;"></a>
